import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Steps, Button, Row, message } from 'antd'
import ContentBox from 'components/contentBox'
import ScenesCom from './com/scenesCom'
import RelatedCom from './com/relatedCom'
import Style from './add.css'
import PropTypes from 'prop-types'

const { Step } = Steps

const steps = [
  {
    title: '选择场景信息'
  },
  {
    title: '选择商品关联'
  }
]
class Add extends Component {
  static propTypes = {
    addScene: PropTypes.func,
    addRequest: PropTypes.any,
    router: PropTypes.any,
    getGoodsList: PropTypes.func,
    goodsData: PropTypes.any,
    restGoods: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      current: 0
    }
    this.stepChange = this.stepChange.bind(this)
    this.previousChange = this.previousChange.bind(this)
    this.categoryChange = this.categoryChange.bind(this)
    this.imageChange = this.imageChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.nameChange = this.nameChange.bind(this)
    this.desChange = this.desChange.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.getGoods = this.getGoods.bind(this)
  }

  stepChange () {
    this.setState({
      current: 1
    })
  }

  previousChange () {
    this.setState({
      current: 0
    })
  }

  categoryChange (value) {
    this.setState({
      categoryCode: value
    })
  }

  imageChange (value) {
    this.setState({
      image: value
    })
  }

  nameChange (value) {
    this.setState({
      name: value
    })
  }

  desChange (value) {
    this.setState({
      description: value
    })
  }

  // 提交场景
  handleSubmit () {
    const { image, categoryCode, name, width, height, addTagNodes, description } = this.state
    let params = {
      image,
      categoryCode,
      name,
      width,
      height,
      description,
      addTagNodes: addTagNodes || []
    }
    this.props.addScene(params)
  }

  // 添加热区
  handleOk (value) {
    this.setState({
      width: value.width,
      height: value.height,
      addTagNodes: value.addTagNodes
    })
    this.props.restGoods()
  }

  getGoods (params) {
    this.props.getGoodsList(params)
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.addRequest && nextProps.addRequest) {
      message.success('添加成功')
      setTimeout(() => {
        window.location.href = '/scenes/list'
      }, 800)
    }
  }

  render () {
    const { current, image, name, categoryCode, description } = this.state
    const { goodsData } = this.props
    return (
      <>
        <ContentBox>
          <div className={Style['scenes-add-container']}>
            <div className={Style['steps-container']}>
              <Steps current={current}>
                {steps.map(item => (
                  <Step key={item.title} title={item.title} disabled />
                ))}
              </Steps>
            </div>
            <div>
              {
                current === 0
                  ? <Row justify='center' type='flex'>
                    <ScenesCom
                      stepChange={this.stepChange}
                      categoryChange={this.categoryChange}
                      imageChange={this.imageChange}
                      nameChange={this.nameChange}
                      name={name}
                      categoryCode={categoryCode}
                      image={image}
                      desChange={this.desChange}
                      description={description}
                    />
                  </Row> : <Row justify='center' type='flex'>
                    <div style={{ marginTop: '50px', width: '100%' }}>
                      <RelatedCom image={image} handleOk={this.handleOk} restGoods={this.props.restGoods} getGoods={this.getGoods} goodsList={goodsData && goodsData.list} />
                      <div className={Style['button-container']}>
                        <Button onClick={this.previousChange}>返回上一步</Button>
                        {/* <Button className={Style['button']} style={{ marginLeft: '20px', marginRight: '20px' }}>保存</Button> */}
                        <Button type='primary' onClick={this.handleSubmit}>完成提交场景</Button>
                      </div>
                    </div>
                  </Row>
              }
            </div>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  addRequest: state.scene.addRequest,
  goodsData: state.goods.goodsData
})
const mapDispatch = dispatch => ({
  addScene: dispatch.scene.addScene,
  getGoodsList: dispatch.goods.getGoodsList,
  restGoods: dispatch.goods.restGoods
})
const FormAdd = Form.create()(Add)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormAdd)
)
